<template>
  <div class="dict">
    <headerVue></headerVue>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" style="height: 200px">
      <van-swipe-item v-for="i in setlunpo" :key="i.id">
        <img :src="imgurl + i.image" alt style="height: 100%" />
      </van-swipe-item>
    </van-swipe>
    <van-grid class="row">
      <van-grid-item icon="photo-o" text="全部商品" to="/prolist" />
      <van-grid-item icon="photo-o" text="优惠卷" />
      <van-grid-item icon="photo-o" text="积分商品" to="/jifen" />
      <van-grid-item icon="photo-o" text="积分签到" to="/sigin" />
    </van-grid>
    <!-- <van-panel title="限时拼团" style="margin: 10px">
      <div>
        <van-grid :border="false" :column-num="2">
          <van-grid-item>
            <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
            <br />
            <span>菊商</span>
            <br />
            <span style="color: orange">6.30</span>
          </van-grid-item>
          <van-grid-item>
            <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
            <br />
            <span>水蜜桃</span>
            <br />
            <span style="color: orange">9.30</span>
          </van-grid-item>
        </van-grid>
      </div>
    </van-panel>-->
    <van-panel title="精品推荐" style="margin: 10px">
      <div>
        <van-grid :border="false" :column-num="2">
          <van-grid-item v-for="i in sethot" :key="i.id">
            <van-image :src="imgurl + i.defaultImg" />
            <br />
            <span>{{ i.name }}</span>
            <br />
            <span style="color: orange">{{ i.shopPrice / 100 }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </van-panel>
    <van-panel title="猜你喜欢">
      <div v-for="o in setlike" :key="o.id">
        <van-card
          :price="o.shopPrice"
          :origin-price="o.price"
          :title="o.name"
          :thumb="imgurl + o.defaultImg"
          style="height: 20vh;"
          @click="product(o.id)"
        />
      </div>
    </van-panel>
  </div>
</template>

<script>
import headerVue from "./other/header.vue";
export default {
  data() {
    return {
      setlunpo: null,
      sethot: null,
      setlike: null
    };
  },
  methods: {
    async gethuandeng() {
      let res = await this.$get(this.url + "getAllSlide");
      console.log(res);
      if (res.errorCode == "0") {
        this.setlunpo = res.data;
      }
    },
    // 精品推荐
    async gethot() {
      let res = await this.$post(this.url + "catalog/product/hot", {});
      console.log(res);
      if (res.errorCode == "0") {
        this.sethot = res.data.splice(0, 2);
        this.setlike = res.data;
      }
    },
    // 跳转
    product(id) {
      this.Sto.Session.set("productId", id);
      this.$router.push("/product");
    },
  },
  components: {
    headerVue,
  },
  created() {
    this.gethuandeng();
    this.gethot();
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.row /deep/ .van-icon {
  display: inline-block;
  padding: 7px;
  background-color: #9599fa;
  border-radius: 20px;
}
</style>
